<script setup>
import { ref, defineEmits, defineProps, computed } from "vue";
const emit = defineEmits([
  "size-change", // 当页面大小发生变化时触发
  "current-change", // 当当前页码发生变化时触发
  "update:currentPage", // 当外部需要更新当前页码时使用
  "update:pageSize", // 当外部需要更新页面大小时使用
]);

const props = defineProps({
  currentPage: {
    type: Number,
    default: 1,
  }, // 当前页码
  pageSize: {
    type: Number,
    default: 5,
  }, // 每页显示数量
  total: {
    type: Number,
    default: 0,
  }, // 总数量
  pageSizes: {
    type: Array,
    default: () => [5, 10],
  }, // 可选择的每页数量
});

// 计算属性用于双向绑定
const currentPageComputed = computed({
  get() {
    return props.currentPage;
  },
  set(newValue) {
    // 在外部需要更新当前页码和页面大小时进行触发。
    emit("update:currentPage", newValue);
  },
});
const pageSizeComputed = computed({
  get() {
    return props.pageSize;
  },
  set(newValue) {
    // 在外部需要更新当前页码和页面大小时进行触发。
    emit("update:pageSize", newValue);
  },
});
const totalComputed = computed(() => props.total); // 总数量的计算属性
const pageSizesComputed = computed(() => props.pageSizes); // 可选择的每页数量的计算属性

// 处理页面大小变化的事件
const onSizeChange = (size) => {
  pageSizeComputed.value = size;
  emit("size-change", size);
};
// 处理当前页变化的事件
const onCurrentChange = (page) => {
  currentPageComputed.value = page;
  emit("current-change", page);
};
</script>
<template>
  <el-pagination
    v-model:current-page="currentPageComputed"
    v-model:page-size="pageSizeComputed"
    :page-sizes="pageSizesComputed"
    layout="total, sizes, prev, pager, next"
    background
    v-if="totalComputed > 5"
    :total="totalComputed"
    @size-change="onSizeChange"
    @current-change="onCurrentChange"
    style="margin-top: 20px; justify-content: flex-end"
  />
</template>
